﻿<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<Gola.VN.Scb.Web.Common.Models.FilterModels>" %>
<%@ Import Namespace="Gola.VN.Scb.Web.Common" %>
<div class="break_module">
</div>
<div class="temp_5">
    <div class="title">
        <div class="fl">
        </div>
        <div class="fc">
            LỌC TÌM</div>
        <div class="fr">
        </div>
    </div>
    <div class="content">
        <span>Có <b><span style="color: #E97D13">
            <%: Model.ProductCount %></span></b> sản phẩm</span>
        <%--1, Loc tim theo gia--%>
        <div class="title">
            <div class="fc">
                Theo khoảng giá</div>
        </div>
        <div class="break_module_line">
        </div>
        <div class="list_link">
            <div>
                <span id="lblMin" style="float: left; font-weight: bold;">3.799.000</span> <span
                    id="lblMax" style="float: right; font-weight: bold;">6.999.000</span>
                <div style="clear: both;">
                </div>
            </div>
            <!-- Slider -->
            <div id="slider" style="width: 163px; font-size: 70%; margin: 5px 0;">
            </div>
            <div>
                <span style="float: left;">
                    <input class="stInput wIp txtR number" maxlength="20" id="txtMin" value="<%:Model.MinPrice %>"></span>
                <span style="float: right;">
                    <input class="stInput wIp txtR number" maxlength="20" id="txtMax" value="<%:Model.MaxPrice %>"></span>
                <div style="clear: both;">
                </div>
            </div>
            <div>
                <center>
                    <span>(đơn vị tính: 1.000 VNĐ)</span></center>
            </div>
            <%--<ul>
                <%if (Model.PriceRanges != null)
                  {
                      foreach (var priceRange in Model.PriceRanges)
                      {%>
                <li><a href='<%:Url.RouteUrl("pagination", priceRange.Id)%>' style='word-wrap: break-word;'>
                    <%: priceRange.ToString() %></a></li>
                <%}
                  }%>
              
            </ul>--%>
        </div>
        <%--2, Loc tim theo thuong hieu(nha san xuat)--%>
        <%--<div class="title">
            <div class="fc">
                Theo thuong hieu</div>
        </div>
        <div class="break_module_line">
        </div>
        <div class="list_link">
        </div>--%>
        <%--3, Loc tim theo cua hang--%>
        <div class="title">
            <div class="fc">
                Theo cửa hàng</div>
        </div>
        <div class="break_module_line">
        </div>
        <div class="list_link filter_panel">
            <ul>
                <%if (Model.Provider != null)
                  {
                      foreach (var provider in Model.Provider)
                      {%>
                <li>
                    <%if (Model.IsFilterByProvider)
                      {%>
                    <a href='<%:Url.RouteUrl("displayProducts", new {id=Model.CategoryId, queryvalues =(ViewData["QueryValue"].ToString() )})%>'
                        style='word-wrap: break-word;'>
                        <%:provider.Name%></a> <a href='<%:ViewData["RemoveFilterParam"].ToString()%>' class="remove_select">
                        </a>
                    <%
                      }
                      else
                      {
                    %>
                    <a href='<%:Url.RouteUrl("displayProducts", new {id=Model.CategoryId, queryvalues =( "/h-" + provider.Id +"-"+ provider.Name.ConvertToUnSign()+ ViewData["QueryValue"].ToString() )})%>'
                        style='word-wrap: break-word;'>
                        <%:provider.Name%></a>
                    <%
    
                      }%>
                </li>
                <%
                      }
                  }%>
            </ul>
        </div>
    </div>
    <div class="bottom">
        <div class="fl">
        </div>
        <div class="fc">
        </div>
        <div class="fr">
        </div>
    </div>
    <div class="break_module">
    </div>
</div>
<script type="text/javascript">
//1.Filter by Price Range
    function numToString(num) {
        num = num.toString();
        var result = "";
        for (var i = 0; i < num.length; i++) {
            if (i % 3 == 0 && i > 0) {
                result = "." + result;
            }
            result = num.charAt(num.length - i - 1).toString() + result.toString();
        }
        return result;
    };
    var pid = <%:Model.CategoryId %>;
    $(function () {
        var minVal = <%:Model.CurrentPriceLeft %>;
        var maxVal = <%:Model.CurrentPriceRight %>;
        $('#txtMin').val(minVal);
        $('#txtMax').val(maxVal);
        $('#lblMin').html(numToString(minVal * 1000));
        $('#lblMax').html(numToString(maxVal * 1000));
        
        $('#slider').slider({
            max: <%:Model.MaxPrice %>,
            min: <%:Model.MinPrice %>,
            //step: 10,
            range: true,
            values: [minVal, maxVal],
            change: function (e, ui) {
                                
                var key = '';
                var token = '/g-' + ui.values[0] * 1000 + '-' + ui.values[1] * 1000  + '<%:ViewData["$FilterProvider$"].ToString() %>' 
                    + '<%:(ViewData["$Sortby$"].ToString() + ViewData["$FilterPromotion$"].ToString() + ViewData["$FilterPriceChange$"].ToString())%>';              
              
                document.location.href =  "/san-pham/"+pid+"/q" +token;
            },

            slide: function (e, ui) {
                $('#txtMin').val(ui.values[0]);
                $('#txtMax').val(ui.values[1]);
                $('#lblMin').html(numToString(ui.values[0] * 1000));
                $('#lblMax').html(numToString(ui.values[1] * 1000));
            }
        });

        $('#txtMin').bind('keyup', function (e) {
            $('#lblMin').html(numToString($(this).val() * 1000));
        });

        $('#txtMin').bind('change', function (e) {
            var values = slider.slider('option', 'values');
            values[0] = $(this).val();
            slider.slider('option', 'values', values);
            $('#lblMin').html(numToString(values[0] * 1000));
            var key = '';
            var token = '/g-' + ui.values[0] * 1000 + '-' + ui.values[1] * 1000  + '<%:ViewData["$FilterProvider$"].ToString() %>' 
                    + '<%:(ViewData["$Sortby$"].ToString() + ViewData["$FilterPromotion$"].ToString() + ViewData["$FilterPriceChange$"].ToString())%>';              
              
            document.location.href = "/san-pham/"+pid+"/q" +token;
        });

        $('#txtMax').bind('change', function (e) {
            var values = slider.slider('option', 'values');
            values[1] = $(this).val();
            slider.slider('option', 'values', values);
            $('#lblMax').html(numToString(values[1] * 1000));
            var key = '';
            var token = '/g-' + ui.values[0] * 1000 + '-' + ui.values[1] * 1000  + '<%:ViewData["$FilterProvider$"].ToString() %>' 
                    + '<%:(ViewData["$Sortby$"].ToString() + ViewData["$FilterPromotion$"].ToString() + ViewData["$FilterPriceChange$"].ToString())%>';              
              
            document.location.href =  "/san-pham/"+pid+"/q" +token;
        });

        $('#txtMax').bind('keyup', function (e) {
            $('#lblMax').html(numToString($(this).val() * 1000));
        });
// 2. Filter by Provider


    });
</script>
